<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <div th:include="Introduce/head"></div>
</head>
<style>
    .content-container {
        display: flex;
        margin-left: 10%;

    }
    /* 自定义样式 */
    .image-container {
        display: flex;
        flex-direction: column; /* 列布局 */
        width: 600px;

    }

    .image-container .image-row {
        width: 100%;
        display: flex;
        /*justify-content: space-between;*/
        /*margin-bottom: 10px;*/
        /*margin-right: 90px; !* 调整容器距离页面右边的距离 *!*/

    }

    .image {
        width: 32%; /* 调整图片宽度 */
        margin-bottom: 5px;
    }

    .image img {
        width: 100%;
        height: auto;
        object-fit: cover; /* 保持图像比例并填充容器 */
    }
</style>

<body>
<ul class="layui-nav layui-bg-gray" lay-bar="disabled">
    <li class="layui-nav-item"><img height="40px" src="/static/image/logo.png"></li>
    <li class="layui-nav-item"><a href="">菜单1</a></li>
    <li class="layui-nav-item"><a href="">菜单2</a></li>
</ul>
<div class="layui-carousel" id="carousel-demo-1">
    <div carousel-item>
        <img src="/static/image/login.jpg">
        <img src="/static/image/login-2.png">
    </div>
</div>
<ul class="layui-nav layui-bg-gray">
    <li class="layui-nav-item"><a href="">菜单1</a></li>
    <li class="layui-nav-item"><a href="">菜单2</a></li>
</ul>
<div class="content-container">
    <div class="layui-carousel" id="carousel-video">
        <div carousel-item>
            <img src="/static/image/login.jpg">

            <img src="/static/image/login-2.png">
        </div>
    </div>
    <div class="image-container">
        <div class="image-row">
            <div class="image">
                <img src="/static/image/login.jpg">
            </div>
            <div class="image">
                <img src="/static/image/login.jpg">
            </div>
            <div class="image">
                <img src="/static/image/login.jpg">
            </div>
            <!-- 添加更多图片列 -->
        </div>
        <div class="image-row">
            <div class="image">
                <img src="/static/image/login.jpg">
            </div>
            <div class="image">
                <img src="/static/image/login.jpg">
            </div>
            <div class="image">
                <img src="/static/image/login.jpg">
            </div>
            <!-- 添加更多图片列 -->
        </div>
        <!-- 添加更多图片行 -->
    </div>
</div>
</body>
<script>
    layui.use(['carousel'], function () {
        var carousel = layui.carousel;
        // 渲染 - 常规轮播
        carousel.render({
            elem: '#carousel-demo-1',
            width: 'auto',

        });

        // 渲染 - 设置时间间隔、动画类型、宽高度等属性
        carousel.render({
            elem: '#carousel-video',
            interval: 1800,
            anim: 'fade',
            height:'300px'
        });
    });
</script>


</html>